<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D魔方</title>
    <style>
    /**css动画**/
    /**1.容器container放中间**/
     #container{
     width:500px;
     height:500px;
     bor der:1px solid red; /*1个像素实线边框*/
     /*居中*/
     margin:auto
     }
     /*2.盒子整体需要添加效果*/
     .box{
     width:300px;
     height:300px;
     bor der:1px solid red;
     transform-style:preserve-3d;/*添加3D视觉效果：X，Y,Z*/
     /*姜盒子旋转：45deg*/
     transform:rotatex(45deg) rotateY(45deg);
     /*添加动画：*/
     animation:mofang 10s linear infinite ;
     /*如何将6个面：变成立方体？
     1.将六个面归位到一个点
     2.在一个点进行：向上位移，向下位移，向左位移+旋转90，向右位移+旋转90，向前位移+旋转90，向后位移+旋转90，
     立方体口诀：先位移，在旋转（x,y,z）
     3D动画没有绝对XYZ：本身立体空间（自己定）
     X--横面 Z--纵面 Y---垂直面
     */
     }
     /*一帧：闪过多少张照片;关键帧属性---理解：手翻书*/
     @keyframes mofang{
     0%{transform:rotatex(45deg) rotateY(45deg);}
     70%{transform:rotatex(180deg) rotateY(180deg);}
     100{transform:rotatex(45deg) rotateY(45deg);}
     }
     /*3.个面：公共面：宽高一致，颜色不一致*/
     .page{/*公共面：宽高一致*/
        width: 300px;
        height: 300px;
        /*绝对定位*/
        position:absolute;
    }
    /*六个面的*/
     .page_top{/*上面：向上位移--z移动*/
        background: #5be720;
        transform:translateZ(150px);
    }

    .page_bottom{/*下面：向上位移--z移动*/
        background: #404d3a;
        transform:translateZ(-150px);
    }
    .page_left{/*向左位移(负值)+旋转90*/
        background: #d01212;
        transform:translateX(-150px) rotateY(90deg);
    }
    .page_right{/*向左位移(正值)+旋转90*/
        background: #32187e;
        transform:translateX(150px) rotateY(90deg);
    }
    .page_before{
        background: #1cd2c4;
        transform:translateY(150px) rotateX(90deg);
    }
    .page_after{
        background: #ce21ce;
        transform:translateY(-150px) rotateX(-90deg);
    }

    </style>
</head>
<body>
<!--前端：页面分析--html结构如何搭建，css动画+颜色-->
<!--html结构搭建：魔方6个面:创建6个div--外围创建整体的div空间-->
<div id="container">
<div class="box">
<!--分析：6个面---如何确定6个面颜色,6个面宽高一致（抓一次解决写6次）-->
<div class="page_top page"></div>
<div class="page_bottom page"></div>
<div class="page_left page"> </div>
<div class="page_right page"></div>
<div class="page_before page"></div>
<div class="page_after page"></div>
</div>
</div>
</body>
</html>